<template>
  <div class="my-space">
    <div class="hp-con-r-main h-full flex-1">
      <div class="hp-con-r-main-box flex flex-col h-full">
        <div class="hp-con-r-box-title">
          <div class="hp-con-r-box-title-text">
            {{ $t("homePage." + currentMainMenu.nameEn) }}
          </div>
        </div>
        <div class="hp-con-r-box-content flex flex-col flex-1">
          <el-row>
            <el-col v-for="(tool, index) in mySpaceList" :key="tool.id" :span="8">
              <div class="tool-item flex flex-col" @click="handleViewTool(tool)">
                <div class="tool-item-icon">
                  <span style="
                          display: block;
                          width: 100%;
                          height: 80px;
                          line-height: 80px;
                          font-size: 20px;
                          border-radius: 6px;
                          overflow: hidden;
                          text-align: center;
                        ">
                    <svg-icon :icon-class="tool.icon" width="80" height="80" />

                  </span>
                </div>
                <div class="tool-item-title" :title="tool.name">
                  {{ $t("homePage." + tool.nameEn) }}
                </div>
                <!-- <el-tag type="info" class="small-tag">WEB</el-tag> -->
              </div>
            </el-col>
          </el-row>
          <!-- <el-tabs v-if="currentMainMenu && currentMainMenu.id == 1" v-model="activeName">
            <el-tab-pane :label="$t('homePage.mySpce')" name="mySpace">
              
            </el-tab-pane>
          </el-tabs>
          <div v-if="currentMainMenu && currentMainMenu.id == 2">
            <div style="min-height: calc(100vh - 124px); display: flex">
              <div class="hubType-out">
                <div v-for="library in toolHubList" :key="library.id" class="hubType" :class="currentHubType.id == library.id ? 'hubType-active' : ''
                  " @click="changeHubType(library)">
                  {{ $t("homePage." + library.nameEn) }}
                  <span class="float-right">{{ getLibraryItemCount(library) }}</span>
                </div>
              </div>
              <div style="width: calc(100% - 250px)">
                <div class="hub-title">
                  {{ $t("homePage." + currentHubType.nameEn) }}
                </div>
                <div style="
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    overflow: auto;
                  ">
                  <div class="hub-stash" v-for="(item, index) in getLibraryItemList(currentHubType)"
                    :key="'Stash' + index">
                    <div class="hub-stash-box" @click="handleClickStash(item)">
                      <el-row>
                        <img class="hub-img" :src="`/images/toolhub/${item.icon}`" />
                        <div class="hub-stash-box-title flex items-center">
                          {{ item.name }}
                        </div>
                      </el-row>
                      <div class="hub-stash-line">
                        {{ item.content }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeName: "mySpace",
      currentHubType: null,
      recentlyList: [
        {
          name: "模型管理工具",
          path: "/model-manage-tool",
          time: "3s",
        },
        {
          name: "想定编辑工具",
          path: "/model-manage-tool",
          time: "3s",
        },
        {
          name: "实验设计工具",
          path: "/model-manage-tool",
          time: "3s",
        },
        {
          name: "评估分析工具",
          path: "/model-manage-tool",
          time: "3s",
        },
        {
          name: "数据挖掘",
          path: "/model-manage-tool",
          time: "3s",
        },
        {
          name: "数据分析",
          path: "/model-manage-tool",
          time: "3s",
        },
      ],
    };
  },
  props: {
    currentMainMenu: {
      type: Object,
    },
  },
  computed: {
    ...mapState({
      mySpaceList: (state) => state.homePage.mySpaceList,
      toolHubList: (state) => state.homePage.toolHubList,
    }),
  },
  created() {
    this.currentHubType = this.toolHubList[0];
  },
  methods: {
    // 获取仓库数据
    getLibraryItemList(library) {
      if (library.name == "全部分类") {
        return this.toolHubList.reduce((acc, { libraryList }) => {
          acc.push(...libraryList);
          return acc;
        }, []);
      }
      return this.toolHubList.filter((item) => item.id == library.id)[0]
        .libraryList;
    },
    // 获取库元素的数量
    getLibraryItemCount(library) {
      if (library.name == "全部分类") {
        // 累加器
        return this.toolHubList.reduce((acc, cur) => {
          acc += cur.libraryList.length;
          return acc;
        }, 0);
      }
      return library.libraryList.length
    },
    // 处理点击分类下的元素
    handleClickStash(item) {
      window.open(item.url);
    },
    // 进入工具，查看详情
    handleViewTool(tool) {
      this.$store.commit("homePage/SET_TOOL_INFO", tool)
      // 清空vuex中的currentMenu,在初始化tool-menu时让调用created的逻辑，默认选中第一个
      this.$store.commit("homePage/SET_CURRENT_MENU", {})
      // 基于工具跳转
      switch (tool.nameEn) {
        case "model-manage-tool":
          this.$router.push({ name: "perceptualSampleDataManagement" });
          break;
        case "scenario-edit-tool":
          this.$router.push({ name: "trainingAlgorithmEnvironmentImageManagement" });
          break;
        case "experiment-design-tool":
          this.$router.push({ name: "preprocessingAlgorithmEnvironmentImageManagement" });
          break;
        case "evaluation-analysis-tool":
          this.$router.push({ name: "algorithmReleaseEnvironmentImageManagement" });
          break;
        case "simulation-run-tool":
          console.log("SimulationRunTool");
          this.$router.push({ name: "SimulationRunTool" });
          break;
        default:
          break;
      }
    },
    changeHubType(type) {
      this.currentHubType = type;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/themeConfig/themeConfig.scss";

.my-space {
  width: 100%;
  color: var(--ui-text-color);

  .hp-con-r-main {
    min-height: 0;
    // background-color: var(--ui-component-background);

    .hp-con-r-main-box {
      padding: 0 15px 15px;
      overflow: auto;

      .hp-con-r-box-title {
        padding: 32px 0 16px 15px;

      }

      .hp-con-r-box-title-text {
        width: 44%;
        margin: 0 28%;
        border-top: 2px solid var(--ui-menu-item-active-bg);
        border-bottom: 2px solid var(--ui-menu-item-active-bg);
        background: linear-gradient(to right, transparent 0%, var(--ui-menu-item-active-bg) 50%, transparent 100%);
        padding: 15px 0;
        text-align: center;
        font-weight: 500;
        font-size: 25px;
        margin-right: 8px;
        white-space: nowrap;
        overflow: hidden;
        letter-spacing: 5px;
        color: var(--ui-text-color);
      }

      .hp-con-r-box-content {
        padding: 50px 20%;

        .el-row {
          display: flex;
          min-width: 0;
          flex-flow: wrap;
          margin: 0 -8px;
          row-gap: 16px;

          .el-col-8 {
            display: block;
            padding: 0 10px;
            // flex: 0 0 25%;
            // max-width: 25%;
            // min-width: 250px;
          }

          .tool-item {
            min-width: 200px;
            background-color: var(--ui-component-background-alt);
            border: 1px solid var(--ui-border-color-base);
            border-radius: 10px;
            min-width: 240px;
            padding: 50px 15px;

            .tool-item-icon {
              // display: flex;
              margin-bottom: 30px;
              // align-items: center;
            }

            .tool-item-title {
              text-align: center;
              color: var(--ui-text-color);
              font-weight: 500;
              font-size: 20px;
              margin-bottom: 2px;
              line-height: 22px;
            }

            &:hover {
              cursor: pointer;
              box-shadow: 0 2px 24px #28293d14, 0 0 4px #28293d05;
            }
          }

          .tool-item:hover {
            background-color: var(--ui-menu-item-active-bg);
          }
        }
      }
    }
  }

  .hubType-out {
    width: 250px;
    padding: 10px 10px 10px 0;
    border-radius: 10px;
    color: var(--ui-text-color);
  }

  .hubType {
    height: 35px;
    padding: 0 10px;
    line-height: 35px;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 10px;
    color: var(--ui-text-color);

    &:hover {
      border-radius: 6px;
      background: var(--app-secondary-4);
    }

    font-size: 14px;
    transition: all 0.3s ease;
    /* 添加过渡效果 */
  }

  .hubType-active {
    // color: var(--app-primary-base);
    border-radius: 6px;
    background-color: var(--ui-menu-item-active-bg);
  }

  .hub-title {
    font-size: 16px;
    padding: 10px 20px 0 20px;
    width: 100%;
    height: 32px;
    color: var(--ui-text-color);
  }

  .hub-img {
    object-fit: cover;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    display: block;
  }

  .small-img {
    width: 33px;
    height: 33px;
  }

  .hub-stash {
    width: calc(33% - 30px);
    min-width: 200px;
    height: 200px;
    font-size: 14px;
    background: var(--ui-component-background-alt);
    border-radius: 8px;
    padding: 5px;
    margin: 12px;
    color: var(--ui-text-color);
    border: 1px solid var(--ui-border-color-base);
    overflow: hidden;
    cursor: pointer;

    .hub-stash-box {
      padding: 16px;

      .el-row {
        position: relative;
        display: flex;
        flex-wrap: nowrap;

        .el-col-4 {
          position: relative;
          max-width: 100%;
          min-height: 1px;
        }

        .hub-stash-box-title {
          width: 80%;
          margin-left: 8px;
          font-size: 16px;
        }
      }

      .hub-stash-line {
        height: 100px;
        font-size: 12px;
        line-height: 20px;
        margin-top: 8px;
        margin-bottom: 16px;
        color: var(--ui-breadcrumb-base-color);
        white-space: normal;
        text-overflow: ellipsis;
        overflow: auto;
      }
    }

    &:hover {
      border-color: var(--ui-btn-primary-color-hover);
      // box-shadow: 0 2px 24px #28293d14, 0 0 4px #28293d05;
      border: 1px solid var(--app-primary-base);
    }
  }

  .hub-name {
    display: inline-block;
    padding-left: 15px;
  }

  .hub-description {
    padding: 10px;
    font-size: 14px;
    word-wrap: break-word;
    opacity: 0.6;
  }

  .recently-box {
    border-radius: 10px;
    // padding: 20px;
    margin-top: 10px;
  }

  .recently-inner {
    position: relative;
    padding: 10px 20px;
    align-items: center;
    border-bottom: 1px solid var(--ui-border-color-base);
    cursor: pointer;
    display: flex;
    justify-items: center;

    &:hover {
      box-shadow: 0 2px 24px #28293d14, 0 0 4px #28293d05;
      background-color: var(--ui-menu-item-active-bg);
    }
  }

  .recently-inner-icon {
    color: var(--app-primary-base);
  }

  .hub-recently {
    height: 40px;
    padding-left: 10px;
    font-size: 14px;
  }

  .hub-time {
    opacity: 0.6;
    padding-top: 5px;
    font-size: 12px;
  }

  .hub-tag {
    color: #139659;
    background-color: #e3f6ed;
    padding: 0 5px;
    border-color: transparent;
    position: absolute;
    right: 10px;
    top: 19px;
    height: 22px;
    line-height: 20px;
  }
}
</style>